<template>
  <div class="index">
    <div class="search">
      <el-form :inline="true" :model="form" label-width="auto">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="form.rangeDate"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
        </el-form-item>
        <el-form-item v-for="item in formItemList" :key="item.value" :label="item.label">
          <el-input v-model="item.startData" placeholder="请输入最小数据范围" style="width:150px;"/>
          <span style="margin:0 5px;">-</span>
          <el-input v-model="item.endData"  placeholder="请输入最大数据范围" style="width:150px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitSearch">查询</el-button>
          <el-button type="primary" @click="onResetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div>
        <el-tree
          ref="treeRef"
          style="max-width: 200px"
          :data="treeData"
          node-key="value"
          show-checkbox
          @check="handleCheckChange"
        />
      </div>
      <div class="line-chart">
        <line-chart :yData="lineYData" :xAxis="lineXData" v-if="showLineChart"></line-chart>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="index">
  import { ref, nextTick } from "vue";
  import LineChart from "./components/Line.vue";
  import useDemoState from '@/store/modules/demo';
  import { cloneDeep } from "lodash-es";

  const treeData = useDemoState().columns.filter(item=>item.value != "data0" && item.value != "data20").map(item=>{
    return Object.assign(item, {startData:"", endData:""});
  });


  const lineXData = ref<number[]>([]);
  const lineYData = ref<object[]>([]);
  const showLineChart = ref(false);

  const form = ref({
    rangeDate:[]
  })
  const formItemList = ref([]);

  function handleCheckChange(data, nodes) {
    formItemList.value = cloneDeep(nodes.checkedNodes);
  }

  const treeRef = ref();
  function onSubmitSearch(){
    showLineChart.value = true;
    nextTick(()=>{
      const initData = useDemoState().getInitDataList.sort((a, b)=>{
        return a.data20 - b.data20;
      });
      const list = cloneDeep(formItemList.value);
      
      lineXData.value = [];
      lineYData.value = [];
      console.log(initData);
      list.forEach((item, i) => {
        let data:object[] = [];
        let lineXData1 = [];
        initData.map((el, index)=>{
          const dataValue = typeof el[item.value] === "string" ? parseFloat(el[item.value].trim()) : el[item.value];
          if(!!item.startData && !!item.endData){
            if(dataValue >= item.startData && dataValue <= item.endData){
              lineXData1.push(el.data20)
              data.push({
                label:item.label, 
                value:[el.data20, dataValue, i, index]
              })
            }
          }else{
            data.push({
              label:item.label, 
              value:dataValue
            })
            lineXData1.push(el.data20)
          }
          console.log(lineXData);
        });
        lineXData.value = lineXData1;
        lineYData.value.push({
          name:item.label,
          yAxisIndex:i,
          data
        })
      });
      if(lineYData.value.length <= 0){
        onResetSearch()
      }
    })
  }
  function onResetSearch(){
    formItemList.value = [];
    lineXData.value = [];
    lineYData.value = [];
    treeRef.value.setCheckedKeys([]);
    showLineChart.value = false;
  }

</script>
<style scoped>
/* @import url(); 引入css类 */
.content{
  display: flex;
}
.line-chart{
  flex:1;
}
</style>
